import React, { useState, useEffect } from 'react';

// 定义数据类型
interface Stats {
    totalUsers: number;
    activeUsers: number;
    conversionRate: string;
    growthRate: string;
}

interface Trend {
    month: string;
    value: number;
}

interface Data {
    title: string;
    description: string;
    stats: Stats;
    trends: Trend[];
}

// 重型数据组件 - 管理自身的数据加载和显示
const  LazyComponent = () => {
    const [data, setData] = useState<Data | null>(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<string | null>(null);

    useEffect(() => {
        console.info('lazy component start loading...');
        const loadData = async () => {
            try {
                // 模拟网络请求延迟（组件代码加载完成后）
                await new Promise(resolve => setTimeout(resolve, 2000));

                // 模拟获取大量数据
                const mockData: Data = {
                    title: "数据分析报告",
                    description: "这是一份包含详细统计数据的分析报告",
                    stats: {
                        totalUsers: 12543,
                        activeUsers: 8732,
                        conversionRate: "24.5%",
                        growthRate: "12.3%"
                    },
                    trends: [
                        { month: "1月", value: 1200 },
                        { month: "2月", value: 1900 },
                        { month: "3月", value: 3000 },
                        { month: "4月", value: 5000 },
                        { month: "5月", value: 8000 }
                    ]
                };

                setData(mockData);
            } catch (err) {
                setError(err instanceof Error ? err.message : "数据加载失败");
            } finally {
                setLoading(false);
            }
        };

        // 组件挂载后自动开始加载数据
        loadData();
    }, []);

    // 组件内部的数据加载状态
    if (loading) {
        return (
            <div className="mt-6 p-6 bg-gray-50 rounded-lg border border-gray-200">
                <div className="animate-pulse flex flex-col space-y-4">
                    <div className="h-8 bg-gray-200 rounded"></div>
                    <div className="h-6 bg-gray-200 rounded w-3/4"></div>
                    <div className="grid grid-cols-2 gap-4">
                        {Array.from({ length: 4 }).map((_, i) => (
                            <div key={i} className="h-12 bg-gray-200 rounded"></div>
                        ))}
                    </div>
                    <div className="h-40 bg-gray-200 rounded"></div>
                </div>
            </div>
        );
    }

    if (error) {
        return (
            <div className="mt-6 p-6 bg-red-50 rounded-lg border border-red-200 text-red-700">
                <div className="flex items-center">
                    <i className="fa fa-exclamation-triangle mr-3 text-red-500"></i>
                    <div>
                        <h3 className="font-medium">数据加载失败</h3>
                        <p className="text-sm mt-1">{error}</p>
                    </div>
                </div>
            </div>
        );
    }

    // 确保 data 存在
    if (!data) {
        return null;
    }

    return (
        <div className="mt-6 bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-300 hover:shadow-xl">
            <div className="p-6 border-b border-gray-100">
                <h2 className="text-xl font-bold text-gray-800">{data.title}</h2>
                <p className="text-gray-600 mt-1">{data.description}</p>
            </div>

            <div className="grid grid-cols-2 md:grid-cols-4 gap-4 p-6">
                {Object.entries(data.stats).map(([key, value]) => (
                    <div key={key} className="bg-gray-50 rounded-lg p-4 border border-gray-100">
                        <p className="text-sm text-gray-500 uppercase tracking-wider">{key.replace(/([A-Z])/g, ' $1').trim()}</p>
                        <p className="text-2xl font-bold text-gray-800 mt-1">{value}</p>
                    </div>
                ))}
            </div>

            <div className="p-6 border-t border-gray-100">
                <h3 className="text-lg font-semibold text-gray-800 mb-4">趋势分析</h3>
                <div className="bg-gray-50 rounded-lg p-4">
                    {/* 模拟图表 */}
                    <div className="h-40 bg-gradient-to-r from-blue-50 to-indigo-50 rounded flex items-center justify-center">
                        <div className="text-gray-400">
                            <i className="fa fa-line-chart text-5xl"></i>
                            <p className="mt-2 text-center">图表数据</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default LazyComponent;